This Is a Testflight

Completely useless presentation

anarinsk

2023-11-12

Disclaimer

This is a testflight. In these slides, I will test some (nice) features of reveal.js for my personal use. The features come mostly from Quarto-Revealjs.

🐈🐈🐈

  • 이 PT는 장난질입니다. 내용은 무시하고 기능만 봐주세요.
  • Quarto + reveal.js에서 개인적으로 필요한 요소들을 구현했습니다. 새로 익힌 기술이 있을 경우 업데이트하며 기준은 1면 날짜와 같습니다.
  • 슬라이드에서 생성 코드를 상세하게 해설하지 않습니다. 소스와 함께 보시면 좋습니다.

기본 활용

슬라이드 두 장 깔기

  • Turn off alarm
  • Get out of bed
  • (continued in the next slide… Hit a proper key!)

(continued from the previous slide)

  • Go to the bathroom
  • Make breakfast

p 태그와 ui, ol 태그의 글씨는 다를까?

  • 해장술로 적당한 주종은?
  • 해장술은 필요한가?
  • 해장술에 어울리는 안주는?

  1. 위 리스트 텍스트(ul, ol)가 이 텍스트와 달라 보이나요? (다르지 않네요!)

  2. 해장술은 * 숫자에 따라서 다르게 처리됩니다.

    • *: 이탤릭
    • **: 굵게
    • ***: 굵게 + 이탤릭

Footnote 넣기

  • Green 1
  • Brown
  • Purple
  • 한글과 조화롭나요?

Incremental 디폴트 설정

preamble에 디폴트 옵션으로도 넣을 수 있다.

revealjs:
  incremental: true

개별 객체에 대해서도 설정 가능

Incremental activated

리스트 항목에 적용된다.

::: {.incremental} 
- 🐈🐈🐈
- 🐶🐶🐶
:::

사례를 보자.

  • Eat spaghetti
  • Drink wine

Inscremental deactivated

::: {.nonincremental}
- 🐈🐈🐈
- 🐶🐶🐶
:::

역시 사례를 보자.

  • Eat spaghetti
  • Drink wine

Slide with a pause

content before the pause

(. . .을 쓰면 뒤에 나올 내용을 멈출 수 있다.)

content after the pause

Multicolum

Left column

  • This is left column.
  • 40% is allocated.

Right column

  • 이쪽은 오른쪽 열입니다.
  • 60%가 할당되어 있지요!

Page without {.smaller}

  • This is normal
  • 이게 보통 크기

Page with {.smaller}

  • This is smaller
  • 이게 작은 크기
  • 슬라이드 설정에서 ##...{ .smaller }
    • 슬라이드 설정에서만 적용된다.

스크롤이 가능한 슬라이드

yaml에서 디폴트를 설정하거나 슬라이드 설정에서 {.scrollable}

  • Bullet number 1
  • Bullet number 2
  • Bullet number 3
  • Bullet number 4
  • Bullet number 5
  • Bullet number 6
  • Bullet number 7
  • 총알 넘버 8
  • 총알 넘버 9
  • 총알 넘버 10
  • 총알 넘버 11
  • 총알 넘버 12

탭셋을 적용해보자.

Content for Tab A

봉준호가 깐느봉일까요?

Content for Tab B

박찬욱이 깐느박일까요?

\(\rm\LaTeX\) Is Possible!

\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

\[    \begin{bmatrix}                 1 & x & 0 \\                 0 & 1 & -1         \end{bmatrix}\begin{bmatrix}                 1  \\                 y  \\                 1         \end{bmatrix}         =\begin{bmatrix}                 1+xy  \\                 y-1         \end{bmatrix}. \]

인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식~

\(\rm\LaTeX\) with {.smaller}

Note

{.smaller}을 슬라이드 타이틀에 적용한 경우. 콜아웃 노트의 마크는 작아지지 않는다. 따라서 여기서처럼 css 스타일을 적용해 콜아웃 노트 폰트 크기를 조절할 수 있다.

\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \] \[ \begin{bmatrix}                 1 & x & 0 \\                 0 & 1 & -1 \end{bmatrix}\begin{bmatrix}                 1  \\                 y  \\                 1 \end{bmatrix}       =\begin{bmatrix}                 1+xy  \\                 y-1         \end{bmatrix}. \]

인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식~

폰트 적용하기

sample css

  • .qmd 파일과 같은 위치에 .css 파일을 두고, 문서 앞의 YAML에서 해당 파일을 로드하면 된다.
  • 폰트를 로딩하고 적용하는 방법은 대체로 비슷하다. 이 문서에 적용된 format.scss를 보자.
    • 1-3 번 라인이 웹폰트를 로딩하는 css다.
    • 폰트의 추가 및 교체 시 웹폰트의 주소를 바꾸거나 추가하면 된다.
    • 나머지 아래는 css 양식, 즉 PT의 표시 항목 별로 폰트, 크기 및 특성을 지정한다.
@import url("https://cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-ligature-subset.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");

/*-- scss:rules --*/
.reveal h1, 
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
  font-family: 'SUITE', sans-serif !important;
  /* text-shadow: -1px -1px 0 rgba(0, 0, 0, .3); */
  font-weight: 750;
}

.reveal section p {
    font-family: 'SUIT', sans-serif !important;
    font-size: 90%;
}

.reveal section pre code {
  font-family: 'D2Coding', monospace !important;
  font-size: 90%;
}

.reveal ul, 
.reveal li, 
.reveal ol {
    font-family: 'SUIT', sans-serif !important;
    font-size: 95%;
}

.reveal code{
  font-family: 'D2Coding', monospace !important;
  font-size: 95%;
}

백그라운드 활용하기

Slide, aquamarine

You can change the color of background (to aquamarine)!

크기 지정 벽지

This slide’s background image will be sized to 250px and repeated.

꽉찬 벽지 I

  • background-size="cover": 벽지를 슬라이드에 맞춘다. 그림은 임의로 확대된다.

꽉찬 벽지 II

  • background-size="contain": 벽지를 슬라이드에 채워넣지만 원본 그림을 유지한다.

(A slide with no title)

  • 목차(왼쪽 아래 삼선)에 제목을 나오게 하려면?
  • 슬라이드에 제목이 없으면 본문의 처음 대목이 자동으로 들어간다.
## {data-menu-title="타이틀 없는 슬라이드" background-color="aquamarine"}

How to Use Code

가상 환경 쓰기

  • 코드를 실행하기 위해서는 ’환경’을 쓰는 게 좋다.

    • python의 env를 쓰든 conda env를 쓰든 필요한 것을 쓰자.

  • VS Code Extension이 아직까지 conda 환경을 제대로 지원하지 않는다.

  • 이제 가상 환경을 잘 지원한다!

    • conda를 쓴다면 conda 환경을, venv를 쓰면 해당 환경을 잡아주자.
    • pixi를 쓴다면, 별도의 폴더 선택을 통해 .pixi > env > bin > python을 지정하면 된다. 🔗 참고

  • 페이지 렌더링이 필요하다면?

    • 최초 생성시 필요할 수 있다.
    • 위와 같이 인터프리터를 설정하고, VS Code 내 터미널에서 >quarto render로 프로젝트를 컴파일하자.

  • 이 슬라이드처럼 다크 테마를 쓸 경우 그림 표시에 문제가 있을 수 있다.

    • 그림 표현 역시 다크 테마에 맞추거나 (Testing Code I)
    • 그림을 표현할 때는 적절한 밝은 테마를 쓰는 것이다. (Testing Code II)

Testing Code I

#| echo: true
#| layout: [-5, 60, -5]
#| fig-size: [10,10]
#| fig-cap: "A line plot on a polar axis"
#| cap-align: center

import numpy as np
import matplotlib.pyplot as plt
plt.style.use('dark_background')
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • plt.style.use('dark_background'): 다크 모드에 맞춘 스타일 설정
  • 한 턴 진행 후 스크롤을 해서 아래의 결과를 확인!
Figure 1: A line plot on a polar axis

Testing Code II

#| echo: true
#| label: fig-polar-2
#| fig-cap: "A line plot on a polar axis wth customized style"

import numpy as np
import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-white')
#plt.rcParams["figure.figsize"] = (6,6)

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • plt.style.use('seaborn-v0_8-white'): 적절한 백색 스타일
Figure 2: A line plot on a polar axis wth customized style

Advanced Techniques

css 적용하기

슬라이드 내에서 ::: 블록 지정 후에 css를 적용할 수 있다.

:::{style="color: yellow;"}
This slide's background image fits the screen.
:::

위와 같이 적용하면 슬라이드 요소의 일부분에 css를 적용할 수 있다.

This slide’s background image fits the screen.

## {
  style="text-align: center;" 
  .center
  }


“슬라이드 타이틀 태그(##)뒤에 style로 css 적용하자.”

Note

단 이렇게 걸게 되면 이 슬라이드에서 보듯이 제목 등 슬라이드 포맷 전체가 css의 적용을 받게 된다.

동영상 임베딩

이렇게 엠베딩이 가능하다. 🔗 참고

 

 

백그라운드 동영상 재생 I

Ted Chiang, “A blurry JPEG of the web”

백그라운드 동영상 재생 II

  • background-video로는 유튜브 영상을 넣을 수 없다.
  • 대신에 background-iframe으로 넣으면 된다. 단 유튜브의 경우 링크는 www.youtube.com/embed/(영상주소코드)로 넣어야 한다.
  • 파라미터
    • &autoplay: 1이면 자동 재생
    • &mute: 1이면 음소거
    • &loop: 1이면 반복 재생. &playlist와 함께 써야 한다.
  • 이 영상의 경우 소리를 활성화해두었다.

링크 걸기

 

AI는 무엇을 얼마나 잘하나? 👇

 

URL 프리뷰

yml 설정에서 preview-links: true를 설정해둔다.

  • 페이지 안에서 링크가 열리는 장점이 있다.
  • 제대로 열리지 않는 페이지가 있다.

[🔗](...){preview-link="true"} 와 같이 {} 안에서 개별적으로 설정해서 쓸 수도 있다.

layout 쓰기

계산능력 vs 효과 👇

 

시기 별 계산 능력의 변화 👇

슬라이드 제목은 유지!

 

Analysis with chatGPT 👇

 

링크 설정하기

  • link 뒤에 target="_blank"를 붙이면 새 창에서 열린다.
  • 이 슬라이드에서 쭉 사용하고 있었다.
![동영상 GO [🔗](https://youtu.be/SzTjGAO6fKo?t=220){target="_blank"}](/images/chatGPT4-da.png)

Github Pages

  • embed-resources: true 설정해야 퍼블리시에 문제가 없다.
    • 렌더링에 필요한 .js 파일들이 함께 올라가야 웹에서 제대로 퍼블리시 된다. 처음만 올라가면 된다. 이후 동기화에서 이 파일들은 동기화되지 않는다.
  • 깃헙 페이지스의 퍼블리시 방식이 바뀌었다. actions에서 자동화하거나 docs에 파일을 다 넣고 퍼블리시 하는 방식이다.
  • 🔗 참고하자. 링크에 소개된 선택지 중에서 docs에 넣고 퍼블리시 하는 방식을 권장한다.

  • GitHub Pages 설정에서 아래와 같이 설정하자.

 

 

그림 크기 및 위치

  • 그림의 크기와 위치는 ![](...) 방식으로 설정이 쉽지 않다.
  • 대신에 layout="(...)"으로 하면 편리하다.
  • 🔗를 참고하자. 이 예시에서도 많이 사용되었다.
:::{layout="[-0.1, 0.7, -0.1]"} # 수평 가운데 맞춤
:::{layout="[[-1], [-0.1, 0.7, -0.1], [-1]]"} # 수평 수직 가운데 맞춤

footer를 없애고 싶을 때

  • Slide에 아래과 같이 붙이자.
::: footer
:::
  • 아직 logo를 없애는 방법은 없다…

H1~H6 글자 크기 제어

  • 슬라이드에 성격에 따라서 요소별로 글자가 크거나 적으면 좋겠다 싶을 때가 있다…
  • format.scss에 아래와 같이 설정하면 된다.
/*-- scss:defaults --*/
$presentation-h1-font-size: 2.2em;
$presentation-h2-font-size: 1.2em;
$presentation-h3-font-size: 1em;
$presentation-h4-font-size: 0.9em;
$presentation-h5-font-size: 0.9em;
$presentation-h6-font-size: 0.9em;

슬라이드 크기 자체의 제어

  • 슬라이드의 판 크기 자체를 제어할 수 있다.
  • 더 많은 글씨나 요소를 넣을 수 있다.
  • 아래의 옵션을 넣어 렌더링된 문서와 비교해보시라.
format: 
    revealjs:
        ...
        width: 1500
        height: 1000  # maybe 3:2 ratio

끝

TEST FOR FOOTER!